<template>
  <el-menu :unique-opened="true" :default-active="menuActiveName" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
    <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes">
    </sub-menu>
  </el-menu>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'

  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        this.menuActiveName = (route.name || 'home') + ''
      }
    }
  }
</script>


<style lang="scss" scoped>
// TODO: 在模板中动态控制缩进
// $--first-level-menu-padding: 44px !important; // 一级菜单
// $--second-level-menu-padding:80px !important; // 二级菜单

// .site-sidebar__menu {
//   > :global(.el-menu-item) {
//     padding-left: $--first-level-menu-padding;
//   }

//   > :global(.el-submenu) {
//     > :global(.el-submenu__title) {
//       padding-left: $--first-level-menu-padding;
//     }

//     > :global(.el-menu) {
//       > :global(.el-menu-item) {
//         padding-left: $--second-level-menu-padding;
//       }
//     }

//   }
// }

</style>
